<template>
  <div class="news-module">
    <div class="news-box">
      <div class="news-title" :class="{'active': isStart}">{{ info.home_news_title }}</div>
      <div class="news-desc" :class="{'active': isStart}">{{ info.home_news_titles }}</div>
    </div>
    <div class="news-container" :class="{'active': isStart}">
      <div class="news-swiper swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in list" :key="index">
            <a :href="'news_detail.html?id=' + item.id" class="news-card hv-scale">
              <div class="photo">
                <img oncontextmenu="return false" :src="item.photo" alt="" class="fit-img">
                <div class="news-tag flex-center" v-if="item.tag" :style="`background: ${item.tag_color || '#FC5821'};`">{{ item.tag }}</div>
              </div>
              <div class="title text-nowrap">{{ item.title }}</div>
              <div class="desc text-nowrap">{{ item.titles }}</div>
              <div class="info">{{ item.cate_info.title }} | {{ item.create_time }}</div>
            </a>
          </div>
        </div>
      </div>
      <div class="news-box-ft flex-between">
        <div class="news-bar" v-show="list.length > 2"></div>
        <div class="news-nav" v-show="list.length > 2">
          <div class="news-prev-btn flex-center">
            <i class="iconfont icon-arrow_left"></i>
          </div>
          <div class="news-next-btn flex-center">
            <i class="iconfont icon-arrow"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { getNewsList } from '@/api/home'
import { formatText } from '../../utils/utils'
import Swiper from 'swiper'
import { Mousewheel, Navigation, Scrollbar } from 'swiper/modules'
import 'swiper/scss'
import 'swiper/scss/navigation'
import 'swiper/scss/scrollbar';
import dayjs from 'dayjs'

const list = ref([])
const current = ref(0)
const isStart = ref(false)
let newsSwiper

const prop = defineProps({
  info: {
    type: Object
  },
  cur: {
    type: Number,
  }
});

watch(() => prop.cur, (newValue, oldValue) => {
  if (newValue === 3) {
    isStart.value = true
  } else {
    isStart.value = false
  }
}, { immdiate: true })


onMounted(() => {
  loadData() 
})

const loadData = () => {
  getNewsList().then(res => {
    list.value = res.data.map(el => {
      el.titles = formatText(el.titles)
      // el.create_time = dayjs(el.create_time).format('YYYY年MM月DD日')
      return el
    })
    setTimeout(() => {
      initSwiper()
    }, 200)
  })
};

const initSwiper = () => {
  newsSwiper = new Swiper('.news-swiper', {
    modules: [Mousewheel, Navigation, Scrollbar],
    mousewheel: false,
    slidesPerView: 'auto',
    spaceBetween: 35,
    // slidesOffsetBefore: '4.2%',
    // slidesOffsetAfter: '4.2%',
    navigation: {
      nextEl: '.news-next-btn',
      prevEl: '.news-prev-btn',
    },
    slidesPerGroup: 3,
    scrollbar: {
      el: '.news-bar',
      draggable: true,
      dragSize: 100
    },
    on: {
      
    }
  })
};

</script>

<style lang="scss">
.news-box {
  padding-top: 5.9375rem /* 95/16 */;
  text-align: center;
  .news-title {
    font-size: 2.8125rem /* 45/16 */;
    line-height: 1;
    font-weight: 500;
    color: #000000;
    opacity: 0;
    transition: all .6s ease-in-out;
    transition-delay: .2s;
    transform: translateY(40px);
    &.active {
      opacity: 1;
      transform: translateY(0)
    }
  }
  .news-desc {
    margin-top: 1.5625rem /* 25/16 */;
    font-size: 1.0625rem /* 17/16 */;
    line-height: 1;
    color: #595757;
    opacity: 0;
    transition: all .6s ease-in-out;
    transition-delay: .4s;
    transform: translateY(40px);
    &.active {
      opacity: 1;
      transform: translateY(0)
    }
  }
}
.news-container {
  margin-top: 3.4375rem /* 55/16 */;
  padding-bottom: 5rem /* 80/16 */;
  opacity: 0;
  transition: all .6s ease-in-out;
  transition-delay: .6s;
  transform: translateY(40px);
  &.active {
    opacity: 1;
    transform: translateY(0)
  }
}
.news-swiper {
  .swiper-slide {
    width: 38.75rem /* 620/16 */;
    &:first-child {
      margin-left: 5rem /* 80/16 */;
    }
    &:last-child {
      margin-right: 5rem /* 80/16 */;
    }
    .news-card {
      width: 38.75rem /* 620/16 */;
      display: block;
      .photo {
        width: 100%;
        height: 21.5625rem /* 345/16 */;
        overflow: hidden;
        border-radius: 2px;
        position: relative;
        .news-tag {
          padding: .5625rem /* 9/16 */ 1.0625rem /* 17/16 */;
          background: #DC1828;
          border-radius: .125rem /* 2/16 */ 0 .125rem /* 2/16 */ 0;
          color: #FFFFFF;
          font-size: .875rem /* 14/16 */;
          line-height: 1;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
      .title {
        margin-top: 2.1875rem /* 35/16 */;
        font-size: 1.75rem /* 28/16 */;
        line-height: 2rem /* 32/16 */;
        font-weight: 500;
        color: #000000;
      }
      .desc {
        margin-top: .9375rem /* 15/16 */;
        color: #444;
        font-size: 1rem /* 16/16 */;
        line-height: 1;
      }
      .info {
        margin-top: 1.875rem /* 30/16 */;
        font-size: .8125rem /* 13/16 */;
        line-height: 1;
        color: #595757;
      }
    }
  }
}
.news-box-ft {
  margin: 3.4375rem /* 55/16 */ auto 0;
  padding: 0 5rem /* 80/16 */;
}
.news-bar {
  width: 27.1875rem /* 435/16 */;
  height: 2px;
  background: #F0F0F0;
  .swiper-scrollbar-drag {
    background: #E50012;
    height: 2px;
  }
}
.news-module {
  overflow-x: hidden;
}
.news-nav {
  display: flex;
  align-items: center;
  .news-next-btn, .news-prev-btn {
    width: 3.125rem /* 50/16 */;
    height: 3.125rem /* 50/16 */;
    border-radius: 50%;
    background: #F2F2F2;
    cursor: pointer;
    &:hover {
      background: #E50012;
      .iconfont {
        color: #FFFFFF;
      }
    }
    .iconfont {
      font-size: 1.125rem /* 18/16 */;
      color: #000000;
    }
  }
  .news-next-btn {
    margin-left: 1.125rem /* 18/16 */;
  }
}
</style>